<!-- 
    slot
 -->
<script>
    import Box from '../components/Box.svelte';
    import ConcatCard from '../components/ConcatCard.svelte';
    import Hoverable from '../components/Hoverable.svelte';
</script>
<style>
	div {
		padding: 1em;
		margin: 0 0 1em 0;
		background-color: #eee;
	}

	.active {
		background-color: #ff3e00;
		color: white;
	}
</style>
<h1>插槽</h1>
<Box>
	<!-- put content here -->
	<h2>Hello!</h2>
	<p>This is a box. It can contain anything.</p>
</Box>
<hr>
<h1>插槽默认值</h1>
<Box></Box>

<hr>
<h1>命名插槽</h1>

<ConcatCard>
	<span slot="name">
		P. Sherman
	</span>
	<span slot="address">
		42 Wallaby Way<br>
		Sydney
	</span>
</ConcatCard>

<hr>
<h1>插槽传参, 类似作用域插槽?</h1>

<Hoverable let:hovering={hovering}>
	<div class:active={hovering}>
		{#if hovering}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</Hoverable>